<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>瀑布流纯css</title>
  </head>
  <body>
    <div>
      具体思路：css样式column-count确定几列，column-gap设置列间距，break-inside:
      avoid;避免内容被拆分到下一列。
    </div>
    <div class="box">
      <div>
        <img src="https://via.placeholder.com/500x100" alt="图片1" />
        <p>内容1: 这是一张图片和文本组合的瀑布流元素。</p>
      </div>
      <div>
        <img src="https://via.placeholder.com/500x200" alt="图片1" />
        <p>内容2: 这是一张图片和文本组合的瀑布流元素。</p>
      </div>
      <div>
        <img src="https://via.placeholder.com/500x300" alt="图片1" />
        <p>内容3: 这是一张图片和文本组合的瀑布流元素。</p>
      </div>
      <div>
        <img src="https://via.placeholder.com/500x400" alt="图片1" />
        <p>内容4: 这是一张图片和文本组合的瀑布流元素。</p>
      </div>
      <div>
        <img src="https://via.placeholder.com/500x100" alt="图片1" />
        <p>内容5: 这是一张图片和文本组合的瀑布流元素。</p>
      </div>
      <div>
        <img src="https://via.placeholder.com/500x200" alt="图片1" />
        <p>内容6: 这是一张图片和文本组合的瀑布流元素。</p>
      </div>
    </div>
  </body>

  <script></script>

  <style>
    .box {
      column-count: 3;
      column-gap: 10px;
    }
    .box > div {
      width: 500px;
      margin: 0px 20px 20px;
      break-inside: avoid;
    }
  </style>
</html>
